<template>
  <el-table v-loading="loading" :data="tableData" stripe>
    <el-table-column type="index" label="序号" />
    <el-table-column prop="name" label="流程名称" />
    <el-table-column prop="resourceName" label="资源名称" width="150" />
    <el-table-column prop="key" label="流程KEY" width="300" />
    <el-table-column prop="flowInfo.type.typeName" label="流程类型" />
    <el-table-column prop="deploymentId" label="部署ID" />
    <el-table-column prop="version" label="版本号" />
    <el-table-column label="流程状态">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.isSuspended ? 'danger' : 'success'"
        >{{scope.row.isSuspended ? '暂停' : '运行'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="300">
      <template slot-scope="scope">
        <el-button
          plain
          :type="scope.row.isSuspended ? 'success' : 'warning'"
          @click="handleProcessPauseOrStart(scope.row.isSuspended, scope.row.id)"
        >{{scope.row.isSuspended ? '激活' : '暂停'}}</el-button>
        <el-button plain type="primary" @click="goToPath(`${$route.path}/edit/${scope.row.id}`)">编辑</el-button>
        <el-button plain type="danger" @click="handleDeleteProcessDeployment(scope.row.key)">删除</el-button>
        <el-dropdown>
          <el-button plain type="primary">
            更多
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="$emit('setting-icon-click', scope.row)">流程图标</el-dropdown-item>
            <el-dropdown-item @click.native="$emit('setting-form-click', scope.row)">流程表单</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import FlowDesignService from '../../../../service/flow_design'

export default {
  props: {
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    loading: {
      type: Boolean,
      required: true,
      default: () => false
    }
  },
  methods: {
    handleProcessPauseOrStart(isSuspended, id) {
      this.$confirm(
        isSuspended ? '您确定激活该流程？' : '您确定挂起该流程？',
        '提示',
        {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }
      ).then(() => {
        FlowDesignService.processPauseOrStart(id).then(res => {
          this.$message.success(res.message)
          this.$emit('success')
        })
      })
    },
    handleDeleteProcessDeployment(key) {
      this.$confirm('您确定删除该流程？', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        FlowDesignService.deleteProcessDeployment(key).then(res => {
          this.$message.success(res.message)
          this.$emit('success')
        })
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.el-table
  margin-top 20px
  .el-dropdown
    margin-left 10px
</style>
